import React, { useEffect, useState } from "react";
import {
  Space,
  Table,
  TabPaneProps,
  Button,
  Modal,
  Input,
  message,
  Checkbox,
  Form,
  Select,
} from "antd";

import { AudioOutlined, PlusOutlined } from "@ant-design/icons";
import type { TableProps } from "antd";
import type { FormProps } from "antd";
import type { SearchProps } from "antd/es/input/Search";
import axios from "axios";
const { Search } = Input;

const Index: React.FC = () => {
  const [list, setList] = useState([]);
  const [form] = Form.useForm();
  const render = () => {
    axios.get("/api/list").then((resp) => {
      setList(resp.data.list);
    });
  };
  useEffect(() => {
    render();
  }, []);
  interface DataType {
    id: any;
    title: any;
    num: any;
    cs: any;
    zt: any;
  }

  const ztcolor = (record: any) => {
    if (record.zt == "关闭") {
      return "#BABABA";
    } else if (record.zt == "运行中") {
      return "#0B86FF";
    } else if (record.zt == "已上线") {
      return "#46C00D";
    } else {
      return "#F4141F";
    }
  };

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "编号",
      dataIndex: "num",
      key: "num",
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "CS",
      dataIndex: "cs",
      key: "cs",
    },
    {
      title: "状态",
      dataIndex: "zt",
      key: "zt",
      render: (_, record: any) => (
        <div>
          <span
            style={{
              width: "10px",
              height: "10px",
              display: "inline-block",
              background: ztcolor(record),
              borderRadius: "50%",
              marginRight: "5px",
            }}
          ></span>
          {record.zt}
        </div>
      ),
    },

    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" danger onClick={() => del(record)}>
            删除
          </Button>

          <Button
            type="primary"
            onClick={() => edit(record)}
            style={{ background: "#22C7C9" }}
          >
            修改
          </Button>

          <Button type="primary" onClick={() => look(record)}>
            查看
          </Button>
        </Space>
      ),
    },
  ];
  const del = (record: any) => {
    let { id } = record;
    axios.delete("/api/delete", { params: { id } }).then((resp) => {
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      }
    });
  };

  const data: DataType[] = list;
  const onSearch: SearchProps["onSearch"] = (value) => {
    axios.post("/api/search", { value }).then((resp) => {
      setList(resp.data.items);
    });
  };

  type FieldTypeAdd = {
    id?: any;
    title?: any;
    num?: any;
    cs?: any;
    zt?: any;
  };
  const onFinishAdd: FormProps<FieldTypeAdd>["onFinish"] = (values) => {
    setIsModalOpenAdd(false);
    axios.put("/api/add", values).then((resp) => {
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      }
    });
  };

  const addList = () => {
    setIsModalOpenAdd(true);
  };
  const [isModalOpenAdd, setIsModalOpenAdd] = useState(false);

  const handleOkAdd = () => {
    setIsModalOpenAdd(false);
  };

  const handleCancelAdd = () => {
    setIsModalOpenAdd(false);
  };

  const edit = (record: any) => {
    setIsModalOpenEdit(true);
    const items = form.setFieldsValue(record);
  };
  const [isModalOpenEdit, setIsModalOpenEdit] = useState(false);
  const handleOkEdit = () => {
    setIsModalOpenEdit(false);
  };

  const handleCancelEdit = () => {
    setIsModalOpenEdit(false);
  };
  const onFinishEdit: FormProps<FieldTypeAdd>["onFinish"] = (values) => {
    setIsModalOpenEdit(false);
    axios.put("/api/edit", values).then((resp) => {
      let { code, msg } = resp.data;
      if (code == 200) {
        message.success(msg);
        render();
      } else {
        message.error(msg);
      }
    });
  };

  let [isModalOpenLook, setIsModalOpenLook] = useState(false);
  let [lookList, setLookList] = useState<any>({});
  let look = (record: any) => {
    setLookList(record);
    setIsModalOpenLook(true);
  };
  let handleOkLook = () => {
    setIsModalOpenLook(false);
  };
  let handleCancelLook = () => {
    setIsModalOpenLook(false);
  };

  const ztcolorlook = (zt: any) => {
    if (zt == "关闭") {
      return "#BABABA";
    } else if (zt == "运行中") {
      return "#0B86FF";
    } else if (zt == "已上线") {
      return "#46C00D";
    } else {
      return "#F4141F";
    }
  };

  const handleChange = (value: string) => {
    axios.post("/api/screen", { value }).then((resp) => {
      let { items } = resp.data;
      setList(items);
    });
  };

  return (
    <div>
      <Select
        defaultValue="全部"
        style={{ width: 120 }}
        onChange={handleChange}
        options={[
          { value: "全部", label: "全部" },
          { value: "已上线", label: "已上线" },
          { value: "运行中", label: "运行中" },
          { value: "异常", label: "异常" },
          { value: "关闭", label: "关闭" },
        ]}
      />
      <Modal
        title="查看"
        open={isModalOpenLook}
        onOk={handleOkLook}
        onCancel={handleCancelLook}
      >
        <div>ID:{lookList.id}</div>
        <div>Title:{lookList.title}</div>
        <div>Num:{lookList.num}</div>
        <div>CS:{lookList.cs}</div>
        <div>
          ZT:{" "}
          <span
            style={{
              width: "10px",
              height: "10px",
              display: "inline-block",
              background: ztcolorlook(lookList.zt),
              borderRadius: "50%",
              marginRight: "5px",
            }}
          ></span>
          {lookList.zt}
        </div>
      </Modal>

      <Modal
        title="编辑"
        open={isModalOpenEdit}
        onOk={handleOkEdit}
        onCancel={handleCancelEdit}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinishEdit}
          autoComplete="off"
          form={form}
        >
          <Form.Item<FieldTypeAdd>
            label="ID"
            name="id"
            rules={[{ required: true, message: "Please input your id!" }]}
          >
            <Input disabled />
          </Form.Item>
          <Form.Item<FieldTypeAdd>
            label="Title"
            name="title"
            rules={[{ required: true, message: "Please input your title!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldTypeAdd>
            label="Num"
            name="num"
            rules={[{ required: true, message: "Please input your num!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldTypeAdd>
            label="CS"
            name="cs"
            rules={[{ required: true, message: "Please input your cs!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldTypeAdd>
            label="Zt"
            name="zt"
            rules={[{ required: true, message: "Please input your zt!" }]}
          >
            <Select>
              <Select.Option value="已上线">已上线</Select.Option>
              <Select.Option value="关闭">关闭</Select.Option>
              <Select.Option value="运行中">运行中</Select.Option>
              <Select.Option value="异常">异常</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              修改
            </Button>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="添加"
        open={isModalOpenAdd}
        onOk={handleOkAdd}
        onCancel={handleCancelAdd}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinishAdd}
          autoComplete="off"
        >
          <Form.Item<FieldTypeAdd>
            label="Num"
            name="num"
            rules={[{ required: true, message: "Please input your num!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldTypeAdd>
            label="Title"
            name="title"
            rules={[{ required: true, message: "Please input your title!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldTypeAdd>
            label="cs"
            name="cs"
            rules={[{ required: true, message: "Please input your cs!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldTypeAdd>
            label="Zt"
            name="zt"
            rules={[{ required: true, message: "Please input your zt!" }]}
          >
            <Select>
              <Select.Option value="已上线">已上线</Select.Option>
              <Select.Option value="关闭">关闭</Select.Option>
              <Select.Option value="运行中">运行中</Select.Option>
              <Select.Option value="异常">异常</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              添加
            </Button>
          </Form.Item>
        </Form>
      </Modal>

      <Search placeholder="请输入搜索的内容" onSearch={onSearch} enterButton />
      <Button type="dashed" block onClick={() => addList()}>
        <PlusOutlined />
        新建
      </Button>
      <Table columns={columns} dataSource={data} />
    </div>
  );
};
export default Index;
